<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑考勤群组</title>
    <link rel="stylesheet" href="../css/bootstrap.css">
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../js/jquery.serializejson.js"></script>
    <script type="text/javascript" src="../js/bootstrap.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <script type="text/javascript" src="../layui/layui.all.js"></script>
</head>
<body>
<div class="container layui-row" id="container" align="auto" >
    <form class="layui-form layui-form-pane" id="form1">
        <div class="layui-form-item">
            <label class="layui-form-label">群组名</label>
            <div class="layui-input-block">
                <input type="text" name="inCheckingName" required  lay-verify="required" placeholder="请输入群组名" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上午打卡</label>
            <div class="layui-input-block">
                <input type="text" required  lay-verify="required" placeholder="选择上午时间" name="inMorningClosingTime" id="morning" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下午打卡</label>
            <div class="layui-input-block">
                <input type="text" required  lay-verify="required" placeholder="选择下午时间" name="inAfternoonClosingTime" id="afternoon" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择负责人</label>
            <div class="layui-input-block">
                <select name="inQunzhuId" v-model="inQunzhuId">
                    <option value="0">请选择</option>
                    <option v-for="(admin,index) in admins" v-text="admin.empName" :value="admin.empId"></option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">选择部门</label>
            <div class="layui-input-block" >
                <input v-for="dept in depts" type="checkbox" name="deptId" :title="dept.deptName" :value="dept.deptId" v-model="deptList">
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formdata">提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script>
    var _this;
    var transfer;
    var laydate;
    var form;
    var data1
    var app = new Vue({
        el: "#container",
        data: {
            checkin: {
                inAttAttgroupId:0,
                inMorningClosingTime: "",
                inAfternoonClosingTime: "",
                inQunzhuId:0,
                inCheckingName: "",
            },//用于绑定搜索表单
            depts: [],
            admins:[],
            deptList:[],
            message: "--根据状态选择--",
            url: "/getCheckIn",//定义分页组件内部查询的地址
            inQunzhuId:0,
        },
        created: function () {
            _this = this;
            _this.selectDepts();
            _this.selectAdmins();
        },

        updated:function(){
            form.on('submit(formdata)', function(data){
                console.log("提交开始");
                console.log(data.field);
                alert(_this.deptList);
                $.ajax({
                    url:'/addAttendance',
                    method:'post',
                    data:{inCheckingName:data.field.inCheckingName, inMorningClosingTime:data.field.inMorningClosingTime.toString(),
                        inAfternoonClosingTime:data.field.inAfternoonClosingTime.toString(),inQunzhuId:data.field.inQunzhuId, deptList:_this.deptList},
                    dataType:'JSON',
                    success:function(dat){
                        alert("操作成功");
                    },
                    error:function (dat) {
                        alert("失败");
                    }
                }) ;
            });

            form.render();
            laydate.render({
                elem: '#morning'
                , type: 'time'
            });

            laydate.render({
                elem: '#afternoon',
                type: 'time'
            });

        },

        mounted: function () {
            //Layui 时间控件
            layui.use('laydate', function () {
                laydate = layui.laydate;
            });

            layui.use('form', function(){
                form = layui.form;
            });
            console.log("加载了");
        },

        methods: {
            selectDepts: function () {
                $.ajax({
                    url: "/getdepts",
                    type: "get",
                    success: function (data) {
                        _this.depts = data.data;
                        console.log(_this.depts);
                    },
                });
            },

            selectAdmins: function () {
                $.ajax({
                    url: "/getadmins",
                    type: "get",
                    success: function (data) {
                        _this.admins = data.data;
                        console.log(_this.admins);
                    },
                });
            },

        }
    });


</script>
</body>

</html>